<template>
    <article class="_article">
        <h2 class="_article-title">{{ title }}</h2>
        <slot></slot>
        <footer class="_article-date">{{ date }}</footer>
    </article>
</template>

<script>
import { useHighlight } from '@/lib/highlight'
import { onUpdated } from 'vue'
export default {
    props: {
        title: {
            type: String,
            default: ''
        },
        date: {
            type: String,
            default: ''
        }
    },
    setup () {
        useHighlight()
        document.body.scrollTop = 0

        onUpdated(() => {
            const codeEls = document.querySelectorAll('code:not(.hljs)')
            for (let i = 0; i < codeEls.length; i++) {
                hljs.highlightElement(codeEls[i])
            }
        })
    }
}
</script>

<style lang="scss">
    @use "./style.scss";
</style>
